<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>切片管理</el-breadcrumb-item>
      <el-breadcrumb-item>教案切片</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索筛选区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="ShowInfo.keyword" placeholder="搜索知识点" class="input-with-select" clearable @clear="getShowList" @change="getShowList">
            <el-button slot="append" icon="el-icon-search" @click="getShowList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="ShowInfo.type" placeholder="可选择类型" clearable @clear="getShowList" @change="getShowList">
            <el-option
              v-for="item in scliceTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 切片列表区域 -->
      <el-table
        :data="ShowList"
        :border="true"
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="content" label="切片内容" width="290"></el-table-column>
        <el-table-column prop="title" label="切片主题名称" width="280"></el-table-column>
        <el-table-column prop="keyConcept" label="关键词" width="270"></el-table-column>
        <el-table-column prop="module" label="类别描述" width="120"></el-table-column>
        <el-table-column prop="type" label="类型" width="99">
          <template slot-scope="scope">
            {{ $getLabel(scliceTypeList,scope.row.type,'value','label') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <!-- 使用作用域插槽 未完善 -->
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip :enterable="false" effect="dark" content="编辑" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip :enterable="false" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        :current-page="ShowInfo.pageNum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="ShowInfo.pageSize"
        :page-count="pages"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <!-- 修改资源对话框 -->
    <el-dialog
      :visible.sync="editDialogVisible"
      title="编辑资源信息"
      width="40%">
      <el-form :model="editResourceForm" label-width="80px">
        <el-form-item label="切片内容">
          <el-input v-model="editResourceForm.content"></el-input>
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="editResourceForm.keyConcept"></el-input>
        </el-form-item>
        <el-form-item label="类别描述">
          <el-input v-model="editResourceForm.module"></el-input>
        </el-form-item>
        <el-form-item label="类型" >
          <el-select v-model="editResourceForm.type" placeholder="请选择切片类型" class="full-width">
            <el-option v-for="item in scliceTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enitInfoSend()">修 改</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { getTeachingPlaneSlices } from '@/api/slices'

export default {
  data() {
    return {
      // 接口参数
      ShowInfo: {
        // 当前的页数
        pageNum: 1,
        // 每页显示的条数
        pageSize: 5,
        type: null,
        keyword: null
      },
      // 总页数
      pages: null,
      // 获取展示列表对象
      ShowList: [],
      // 编辑对话框表单
      editResourceForm: {
        content: '',
        keyConcept: '',
        module: '',
        type: ''
      },
      editResourceID: '',
      // // 总数据条数
      // total: 0,
      // 控制编辑资源对话框隐藏还是展示
      editDialogVisible: false,
      // 切片类型表
      scliceTypeList: [
        {
          value: 1,
          label: '教学目标'
        },
        {
          value: 2,
          label: '教学重难点'
        },
        {
          value: 3,
          label: '教学准备'
        },
        {
          value: 4,
          label: '其他'
        }
      ]

    }
  },
  computed: {
  },
  created() {
    this.getShowList()
  },
  methods: {
    // 获取展示列表
    async getShowList() {
      if (this.ShowInfo.type === '') {
        this.ShowInfo.type = null
      }
      if (this.ShowInfo.keyword === '') {
        this.ShowInfo.keyword = null
      }
      const { data: result } = await getTeachingPlaneSlices(this.ShowInfo)// 解构数据
      this.ShowList = result.data.instructionPlanClips
      this.pages = result.data.pages
      // this.total = result.data.total
    },
    // 监听每页显示几个事件
    handleSizeChange(newSize) {
      this.ShowInfo.pageSize = newSize
      this.getShowList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.ShowInfo.pageNum = newPage
      this.getShowList()
    },
    // 显示编辑资源的对话框
    showEditDialog(item) {
      this.editDialogVisible = true
      this.editResourceID = item.id
      this.editResourceForm = item
      if (item.isFeatured === 1) {
        this.editResourceForm.isFeatured = true
      } else if (item.isFeatured === 0) {
        this.editResourceForm.isFeatured = false
      }
    }

  }

}
</script>

<style scoped>
.full-width {
  width: 100%;
}
.el-switch{
  margin-left: 10px;
}
</style>
